<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ce</title>
</head>
<body>
    <h1>大小写转换</h1>
    <p>
            <label>原数据</label>
            <input type="text" id="source" placeholder="请输入用户名" data-input-clear="18">
        <!-- <span>原数据</span>
        <input type="text" id="source"> -->
    </p>
    <p>
        <button id="big" onclick="change('big')">转大写</button>
        <button id="small" onclick="change('small')">转小写</button>
    </p> 
    <p>
        <span>目标数据</span>
        <input type="text" id="target">
    </p>   
</body>
</html>
<script>
    // var source=document.getElementById("source")
    // var big=document.getElementById("big")
    // var small=document.getElementById("small")
    // var target=document.getElementById("target")
    // big.onclick=function(){
    //     target.value=source.value.toUpperCase()
    // }
    // small.onclick=function(){
    //     target.value=source.value.toLowerCase()
    // }
    function $(id){
    return document.getElementById(id)
    }
    // console.log($("big"));
    function change(opt){     
        if(opt=="big"){
            $('target').value=$('source').value.toUpperCase()
        }   else{
            $('target').value=$('source').value.toLowerCase()
        }
    }
</script>